<template>
  <div>
    <el-row >
      <el-col v-for="(item,index) in detailsList" :key="index" :span="24" :offset="index%3===0?0:''">
        <el-card style="width: 90%;margin-left: 5%;margin-top: 35px; border-radius: 20px;" shadow="always">
          <!--            :class="cardClass(item.projectCategory)"     -->
          <div style="display: flex; flex-direction: column;">
            <div style="display: flex;font-size: 40px">
              <el-row style="width: 100%">
                <el-col :span="3">
                  <div style="display: flex;  flex-direction: row; padding-right: 20px;">
                    <el-image :src="cardClass(item.projectCategory)" style="height: 80%;width:80%"></el-image>
                  </div>
                </el-col>
                <el-col :span="21">
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 将手牌号、位置和录单员工放在同一行 -->
                    <div style="margin-top: 20px;">手牌号:{{ item.handBrand }}</div>
                    <div style="margin-top: 20px;">位置:{{ item.seat }}</div>
                    <div style="margin-top: 20px;">录单员工:{{ item.recordEmployeeNumber }}</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 剩余两个项目，并列显示 -->
                    <div style="display: flex; justify-content: flex-start; align-items: center;"> <!-- 录单员工居右 -->
                      <div>项目名称:{{ item.entryName }}</div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; align-items: center;"> <!-- 录单员工居右 -->
                      <div>单价:{{ item.unitPrice }}</div>
                    </div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 上下钟时间，并列显示 -->

                    <div style="display: flex; justify-content: flex-start; align-items: center;"> <!-- 录单员工居右 -->
                      <div>上钟时间:{{ item.note2 }}</div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; align-items: center;"> <!-- 录单员工居右 -->
                      <div>距离下钟时间:{{ item.note1 }}</div>
                    </div>
                  </div>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="paint" style="margin-top: 35px;text-align: center">
      <el-button plain type="primary" round
                 style="margin-bottom: 35px;margin-top: 10px;font-size: 20px;width: 150px;height: 60px;margin-right: 5%; float:right" @click="back()">返回
      </el-button>
    </div>
  </div>
</template>
<script>
import { listDetails2} from "@/api/module/yzx/details";
export default {
  name: "shangzhongcx",
  dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_payment_method', 'yqg_consumption_status', 'yqg_retention_status', 'yqg_project_category', 'yqg_post', 'yqg_check_out_status', 'yqg_department', 'yqg_merge_status', 'yqg_sailings_signs', 'yqg_next_clock_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    cardClass() {
      return  require(`../../../assets/icons/imageicon/34.png`); // 成功状态的颜色类名
    },
    back() {
      this.$router.push({ path: "/jishi/index" });
    },
    /** 查询消费详细列表 */
    getList() {
      this.queryParams.nextClockStatus = "1";
      listDetails2(this.queryParams).then(response => {
        this.detailsList = response.rows;
        if (this.detailsList == null) {
          this.$message({
            type: 'error',
            message: '请先上钟!'
          });
          this.$router.push({path: "/jishi/index"});
        };
        this.total = response.total;

      });
    },

  }
};
</script>

